<script>
import popconfirm from '@/components/Popconfirm/popconfirm.vue'
import { deleteRecord } from '@/api/punishment'
export default {
  components: {
    Popconfirm: popconfirm
  },
  props: {
    id: {
      default() {
        return null
      }
    },
    title: {
      type: String,
      required: false,
      default: '确定删除吗？'
    },
    cancelBtnText: {
      type: String,
      required: false,
      default: '取消'
    },
    confirmBtnText: {
      type: String,
      required: false,
      default: '确定'
    }
  },
  data() {
    return {
      deletePopoverVisible: false,
      isDeleting: false
    }
  },
  computed: {
    isActionDisabled() {
      return this.isDeleting
    }
  },
  methods: {
    async handleDelete() {
      try {
        this.isDeleting = true
        await this.sleep(300)
        const res = await deleteRecord(this.id)
        this.isDeleting = false
        this.closeDeletePopover()
        this.$emit('success')
      } catch (e) {
        this.isDeleting = false
        this.$emit('fail', e.response.data)
      }
    },
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },
    showDeletePopover() {
      this.deletePopoverVisible = true
      console.log(this.deletePopoverVisible)
    },
    closeDeletePopover() {
      if (this.isDeleting) return
      this.deletePopoverVisible = false
    }
  }
}
</script>

<template>
    <el-popover v-model="deletePopoverVisible" placement="top" trigger="click">
        <div class="el-popconfirm">
            <p class="el-popconfirm__main">
                <i class="el-icon-question el-popconfirm__icon" style="color: #f90;" />
                {{ title }}
            </p>
            <div class="el-popconfirm__action">
                <el-button size="mini" :disabled="isDeleting" type="text" @click="closeDeletePopover">
                    {{ cancelBtnText }}
                </el-button>
                <el-button size="mini" :disabled="isActionDisabled" :loading="isDeleting" type="primary"
                    @click="handleDelete">
                    {{ confirmBtnText }}
                </el-button>
            </div>
        </div>
        <el-button slot="reference" type="text">删除</el-button>
    </el-popover>
</template>

<style lang="scss"></style>
